<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="./css/images/favicon.ico">
    <title>小叶の嗷呜/喵呜</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <!-- Custom styles for this template -->
    <link href="./css/apps/styles.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="container">
    <div class="starter-template">
        <h1>小叶の嗷呜/喵呜</h1>
        <p class="lead">（如果您第一次使用请阅读“这咋使用呢”）</p>
    </div>
    <!--error-->
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-12 col-lg-8" id="alert">
            <div class="alert alert-danger alert-dismissable hide" id="error-alert" role="alert"> 你还没输入【嗷呜】呢，【喵呜】无法解惑噢~ </div>
        </div>
        <div class="col-lg-2"></div>
    </div>
    <!--success-->
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-12 col-lg-8" id="alert">
            <div class="alert alert-success alert-dismissable hide" id="copy-alert" role="alert"> 复制成功 </div>
        </div>
        <div class="col-lg-2"></div>
    </div>
    <!--main-->
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-12 col-lg-8">
            <div class="form-group">
                <textarea class="form-control" id="text-decryped" placeholder="嗷呜的困惑" rows="5"></textarea>
            </div>
        </div>
        <div class="col-lg-2"></div>
    </div>
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-12 col-lg-3 leftb">
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-primary" onClick="encrypt()">嗷呜嗷呜</button>
                <button type="button" class="btn btn-warning" onClick="decrypt()">喵呜解惑</button>
            </div>
        </div>
        <div class="col-12 col-lg-5 button-cen">
            <div class="form-group">
                <input type="text" class="form-control" id="text-key" placeholder="红豆泥（选填，详情见帮助~）">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-12 col-lg-8">
            <div class="form-group">
                <textarea class="form-control" id="text-encryped" placeholder="喵呜的答案" rows="7"></textarea>
            </div>
        </div>
        <div class="col-lg-2"></div>
    </div>
    <div class="row lowroe">
        <div class="col-lg-2"></div>
        <div class="col-4 col-lg-2 leftb">
            <button type="button"  class="btn btn-primary" data-toggle="modal" data-target="#aboutModal">这咋使用呢</button>
        </div>
        <div class="col-4 col-lg-4"> </div>
        <div class="col-4 col-lg-2 rightb">
            <button type="button"  class="btn btn-primary" onClick="copyUrl2()">复制</button>
        </div>
    </div>
</div>
<!-- /.container -->

<!-- Modal -->
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">小叶课堂开课啦（帮助）</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-body">
                <p>Q：这是什么？</p>
                <p>A：这是一个用于混淆/加密文本的小工具。</p>
                <p>A：加密工具</p>
                <p>Q：如何使用？</p>
                <p>A：嗷呜嗷呜（加密）：将原文输入在上方输入框【嗷呜的困惑】，输入【红豆泥】（选填，但至少四个字，超过也只取前四个字，要注意顺序）即可在下方输入框得到【喵呜的答案】（密文）；
                    <br>喵呜解惑（解密）：将【嗷呜嗷呜】（密文）输入在上方输入框【嗷呜的困惑】，输入【红豆泥】（选填，但至少四个字，超过也只取前四个字，要注意顺序）即可在下方输入框得到【喵呜的答案】（原文）。</p>
                <p>Q：为何无法得到原文</p>
                <p>A：原文已损坏，部分软件（百度贴吧）会自动转义繁体字或者特殊字体导致无法解读。另外，也请您自行确定原文完整程度。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">爱死你啦</button>
            </div>
        </div>
    </div>
</div>

<script src="./js/apps/jquery.slim.min.js" ></script>
<script src="./js/apps/popper.min.js" ></script>
<script src="./js/bootstrap.min.js" ></script>
<script src="./js/apps/crypto-js.min.js"></script>
<script src="./js/apps/main.js"></script>
</body>
</html>
